<template>
  <div class="home">
    <HomeTop/>
    <div class="main">
    <div class="page_choice">
      <!-- 报到服务 -->
      <div class="choicel"> 
        <div class="choicels">
          <h2>报到服务</h2>
        </div>
        <div class="choicelx">
          <ul style="list-style: none;">
            <li>
              <router-link to="/operation/1">数字迎新平台操作须知</router-link>
            </li>
            <li>
              <router-link to="/operation/2">入学须知</router-link>
            </li>
            <li>
              <router-link to="/operation/3">财务缴费</router-link>
            </li>
            <li>
              <router-link to="/operation/4">学生保险</router-link>
            </li>
            <li>
              <router-link to="/operation/5">报到咨询电话</router-link>
            </li>
          </ul>
        </div>
      </div>
      <!-- 入学攻略 -->
      <div class="choicer">
        <div class="choicers">
          <h2>入学攻略</h2>
        </div>
        <div class="choicerx">
          <ul style="list-style: none;">
            <li>
              <a href="http://www.sicnu.edu.cn/">学校官网</a>
            </li>
            <li>
              <a href="https://www.sicnu.edu.cn/details/11_19228">学校地图</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <HomeBottom/>
  </div>
</template>

<script>
import HomeTop from '@/components/HomeTop.vue';
import HomeBottom from '@/components/HomeBottom.vue';

export default {
    name: 'HomePage',
    components: {
        HomeTop,HomeBottom
    }
}
</script>

<style scoped>
  .home{
    background-color: #F2F1F1;
  }
  .main{
    max-width: 1600px;
    margin: 0px auto;
    padding: 40px 0;
    position:relative;
  }
  .page_choice{
    display: flex;
    justify-content: space-between;
    padding-bottom: 100px;
    flex-flow: wrap;
  }
  .choicel , .choicer{
    width: 48%;
    box-sizing: border-box;
    box-shadow: 0 5px 12px rgb(0 0 0 / 30%);
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 10px;
  }
  .choicels{
    width: 100%;
    height: 70px;
    background-color: #006633;
    line-height: 70px;
    margin: 20px 0 20px 0;
  }
  .choicers{
    width: 100%;
    height: 70px;
    background-color: #124768;
    line-height: 70px;
    margin: 20px 0 20px 0;
  }
  .choicels h2{
    font-size: 25px;
    color: #FFFFFF;
    display: inline-block;
    background: url(@/assets/bdfwtb.png)no-repeat 0%;
    text-indent: 2em;
    margin: 0;
    padding: 0;
  }
  .choicers h2{
    font-size: 25px;
    color: #FFFFFF;
    display: inline-block;
    background: url(@/assets/rxgltb.png)no-repeat 0%;
    text-indent: 2em;
    margin: 0;
    padding: 0;
  }
  ul{
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    padding-inline-start:0px;
  }
  li{
    width: 48%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content:center;
    border: 1px dashed #006633;
    margin-bottom: 20px;
    padding: 0;
  }
  .choicerx li{
    border: 1px dashed #124768;
  }
  /* 点击时去掉下划线 */
  .router-link-active {     
    text-decoration: none;
  }
/* 去掉原有链接文字下划线 */
  a {
    text-decoration: none; 
    color: black;
    font-size: 20px;
  }
</style>